<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
      #view{}
      #view{} .imgbox{float:left;position:relative;width:250px;height: 150px;margin-left: 10px;margin-top: 10px;
      padding:5px;border:solid 1px red;border-radius: 5px;;}
      #view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
      width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
      #view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
    </style>
<title>视频编辑</title>
</head>
<body>

<div class="pd-20">
	<form action="/baby/liveVideoShow/updateLiveVideoShow" method="post" enctype="multipart/form-data"  class="form form-horizontal form-superb" id="form" >
	 <input type="hidden" name="sid" id="sid" value="">
		<div class="row cl">
			<label class="form-label col-1">视频名称:</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="视频名称" id="name" name="name">
			</div>
		</div>
			<div class="row cl">
		<label class="form-label col-1">视频类型:</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="menutype" class="select" id="menu">
					<option value="-1">请选择一个视频类型</option>
					<option value="1">月子馆</option>
					<option value="2">美妈在美国</option>
					<option value="3">赴美生子那些事</option>
				</select>
				</span> </div>
		</div>
		<div class="row cl">
			<label class="form-label col-1">视频地址：</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="视频地址" id="videoUrl" name="videoUrl">
			</div>
		</div>

		<div class="row cl">
            <label class="form-label col-1">视频简介:</label>
            <div class="formControls col-10">
			     <textarea class="textarea" name="introduce" id="introduce"></textarea>
            </div> 
		</div>

        <div class="row cl">
            <label class="form-label col-1">视频图片:</label>
            <div class="formControls col-10">
                <input type="file" name="file" id="file"   nullmsg="请上传图片"  onchange="load(this)"  accept="image/*" class='myfile'>
                请选择jpg,png, jpeg类型的图片
                <div id="view"></div>
            </div> 
        </div>


		 <div class="row cl">
			<div class="col-10 col-offset-1">
				<input type="submit" class="btn btn-primary radius" name="submit"  class="submit" />
			</div>
		</div>

	</form>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script src="js/jquery-form.js" type="text/javascript"></script>
<script src="js/toolUtil.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.min.js" ></script>
<script type="text/javascript" src="js/rule.js" ></script>

<script>

$(function(){

	$.ajax( {  
	     url:'/baby/liveVideoShow/getLiveVideoShow',// 跳转到 action  
	     data:{  
	        key : getQueryString('sid')
	      },  
	     type:'post',  
	     cache:false,  
	     dataType:'json',  
	     success:function(data) { 
	     	console.log(data);
	         if(data.code =="2000" ){  
	             var str= data.data
	             $("#name").val(str.name);
	             $("#videoUrl").val(str.videoUrl);
	             $("#introduce").val(str.videoIntroduce);
	             $("#sid").val(str.sid);
	             $("#menu option[value='"+str.videoType+"']").attr("selected","selected");
	              var imgbox=$('<div></div>');
	              imgbox.addClass('imgbox');
	              $('#view').append(imgbox);
	             var imgs = $('<input type="image" />');
	             var divstr=$('<div style="float:right" class="btn btn-secondary radius delimg" onclick="delimg(\''+str.img.imageUrl+'\');">删除</div> </div>');
	            imgs.attr('name','img');
	            imgs.attr('src', str.img.realPicUrl);
	            $(".imgbox").append(imgs);
	            $(".imgbox").append(divstr);
	           
	         }else if(data.code =="5001" ){
	          alert(data.message); 
	           window.parent.location.href='http://localhost:8080/baby/resource/admin/login.html'
	                console.log(data);  
	               
	             } 
	      }, error : function() {      
	             // view("异常！");  
	          alert("异常！");  
	     }  
	});
})

//提交修改
function sub(){
	var sid=$("#sid").val();
	var name =$("#name").val();;
	var videoUrl=$("#videoUrl").val();
	var introduce=$("#introduce").val();
	var files= $("#file").val();
	if(files==''){
		files=null;
	}

	$.ajax( {  
	     url:'/baby/liveVideoShow/updateLiveVideoShow',// 跳转到 action  
	     data:{  
	        key : getQueryString('sid'),
	        name:name,
	        videoUrl:videoUrl,
	        introduce:introduce,
	        file:files
	      },  
	     type:'post',  
	     cache:false,  
	     dataType:'t',  
	     success:function(data) { 
	     	console.log(data);
	         if(data.code =="2000" ){  
	             alert(data.message); 

	         }else if(data.code =="5001" ){
	          alert(data.message); 
	           window.parent.location.href='http://localhost:8080/baby/resource/admin/login.html'
	                console.log(data);  
	               
	             } 
	      }, error : function() {      
	             // view("异常！");  
	          alert("异常！");  
	     }  
	});

}


$('body').on('click','.close',function(){
  $(this).parent('.imgbox').remove();
});

$(document).ready(function(){

        $('#form').ajaxForm(function(data){

          //  alert(data);//弹出ajax请求后的回调结果，data回调数据  onclick="sub()"
            if(data.code =="2000" ){ 
             alert(data.message); 
             window.location.href='superb.html'
           //  console.log(data);  
             //setCookie("username",data.data.userName);
           	 
            // window.location.reload();   
         }else{  
              alert(data.message); 
             console.log(data);  
         }  
        });

});

function load(file) {
	  var num=1;
	  if (file.files) {
	  $('.imgbox').remove()
	  var reader = new FileReader();
	  reader.readAsDataURL(file.files[0]);
	  reader.onload = function(evt) {
		  var imgbox=$('<div></div>');
		  imgbox.addClass('imgbox');
		  $('#view').append(imgbox);

		  var imgs = $('<input type="image" />');
		  imgs.attr('name','mum'+num);
		  num++;
		  imgs.appendTo(imgbox);
		  imgs.attr('src', evt.target.result);
		}
	}
}

function delimg(id){

  $.ajax( {  
    url:'/baby/uploadImg/deletePic',// 跳转到 action  
    data:{key:id},  
    type:'get',  
    cache:false,  
    dataType:'json',  
    success:function(data) { 
        // console.log(data);
        if(data.code =="2000" ){ 
          alert(data.message);
          window.location.reload();
        }else{
          alert(data.message);
        }
      }, 
      error : function() {      
        alert("异常！");  
    }  
  });

}



</script>

</body>
</html>